<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Charged Sphere with Dielectric Shell</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    const centerX = 200;
    const centerY = 150;
    const radiusR = 70;
    const radiusR_prime = 120;

    // Draw the dielectric shell (shaded grey ring)
    // The original image has a noisy/mottled texture, which is likely an artifact.
    // A solid grey fill is standard for schematics of uniform dielectrics.
    ctx.beginPath();
    // Path for the outer circle
    ctx.arc(centerX, centerY, radiusR_prime, 0, 2 * Math.PI, false);
    // Path for the inner hole, drawn in reverse direction to use the even-odd fill rule
    ctx.arc(centerX, centerY, radiusR, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fillStyle = '#E0E0E0'; // Light grey
    ctx.fill();

    // Set line style for outlines and lines
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;

    // Draw outer circle outline
    ctx.beginPath();
    ctx.arc(centerX, centerY, radiusR_prime, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw inner circle outline (surface of the metal sphere)
    ctx.beginPath();
    ctx.arc(centerX, centerY, radiusR, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw radius lines
    const angleR = -50 * Math.PI / 180;
    const angleR_prime = -20 * Math.PI / 180;

    // Line for R
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX + radiusR * Math.cos(angleR), centerY + radiusR * Math.sin(angleR));
    ctx.stroke();

    // Line for R'
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX + radiusR_prime * Math.cos(angleR_prime), centerY + radiusR_prime * Math.sin(angleR_prime));
    ctx.stroke();

    // Draw charges (+) on the inner sphere's surface
    ctx.font = 'bold 16px Arial';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const numCharges = 12;
    // Rotate the starting position slightly to avoid charges overlapping with radius lines
    const chargeAngleOffset = 15 * Math.PI / 180; 
    for (let i = 0; i < numCharges; i++) {
        const angle = (i * 2 * Math.PI / numCharges) + chargeAngleOffset;
        const x = centerX + radiusR * Math.cos(angle);
        const y = centerY + radiusR * Math.sin(angle);
        ctx.fillText('+', x, y);
    }

    // Draw labels R and R'
    ctx.font = 'italic 20px Times New Roman';
    
    // Label R
    const rLabelX = centerX + 0.55 * radiusR * Math.cos(angleR);
    const rLabelY = centerY + 0.55 * radiusR * Math.sin(angleR) + 5;
    ctx.fillText('R', rLabelX, rLabelY);
    
    // Label R'
    const rPrimeLabelX = centerX + 0.5 * radiusR_prime * Math.cos(angleR_prime);
    const rPrimeLabelY = centerY + 0.5 * radiusR_prime * Math.sin(angleR_prime);
    ctx.fillText("R'", rPrimeLabelX, rPrimeLabelY);
    
    // Draw the caption
    ctx.font = '20px "SimSun", "Songti SC"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    // Using a full-width hyphen as in the original image
    ctx.fillText('习题 7－62 图', centerX, canvas.height - 15);
</script>
</body>
</html>